import { NodeProps } from '@/components/workflow/types'
import { useWorkFlowStore } from '@/store/workflowStore'
import { CaretRightOutlined } from '@ant-design/icons'
import type { CollapseProps } from 'antd'
import { Collapse, theme } from 'antd'
import type { FC } from 'react'
import React, { useEffect, useState } from 'react'
import CollapseNodeComponent from '../components/CollapseNodeComponent'
import InputCont from './component/InputCont'
import OutputCont from './component/OutputCont'
import { getExtractorDefaultParams } from './default'
import './index.less'
import RunDrawer from '../components/RunDrawer'

const ExtractorPanel: FC<NodeProps> = ({ id, data }: any) => {
  const { flowVariables, setFlowVariables } = useWorkFlowStore()
  const { token } = theme.useToken()
  const [info, setInfo] = useState({ ...getExtractorDefaultParams() })
  const [runDrawerHid, setrunDrawerHid] = useState(false)
  
  const editData = (e: any) => {
    const obj = { ...info, ...e }
    setInfo(obj)
    setFlowVariables(id, data.title, obj)
  }

  const [loadContent, setLoadContent] = useState(false)

  useEffect(() => {
    if (flowVariables && flowVariables[data.id]) {
    
      const obj = {
        ...info,
        ...flowVariables[data.id]
      }
    
      setInfo(obj)

      if (flowVariables[data.id].runDrwaerHid === 1) {
        setrunDrawerHid(true)
      }

      setLoadContent(true)
    }
  }, [flowVariables])

  const createCollapseItem = (key: string, label: JSX.Element, children: JSX.Element) => ({
    key,
    label,
    children,
    style: {
      marginBottom: 10,
      background: token.colorFillAlter,
      borderRadius: token.borderRadiusLG,
      border: 'none'
    }
  })

  const InputItems: CollapseProps['items'] = [
    createCollapseItem(
      '1',
      <CollapseNodeComponent
        title="输入"
        tooltipText="选择需要提取内容的文档输入"
      />,
      <>
      {loadContent && <InputCont info={info}  editData={editData} />}
      </>
    )
  ]

  const OutputItems: CollapseProps['items'] = [
    createCollapseItem(
      '2',
      <CollapseNodeComponent
        title="输出"
        tooltipText="提取后的输出内容配置"
      />,
      <OutputCont info={info} editData={editData} />
    )
  ]

  const collapseItems = [
    { key: '1', title: '输入', items: InputItems },
    { key: '2', title: '输出', items: OutputItems }
  ]

  const collapseProps = {
    bordered: false,
    expandIcon: ({ isActive }) => <CaretRightOutlined rotate={isActive ? 90 : 0} />,
    style: { background: token.colorBgContainer }
  }

  const renderCollapse = (item: any) => (
    <div className="extractor_cardMarBot" key={item.key}>
      <Collapse {...collapseProps} defaultActiveKey={[item.key]} items={item.items} />
    </div>
  )

  return (
    <div className="workflow-common-panel flexCol caseOverFlowY">
      <span className="lim_title">从文档中提取指定内容</span>
      {collapseItems.map(renderCollapse)}
      {/* 抽屉 */}
      {runDrawerHid && <RunDrawer nodeData={info} openDef={runDrawerHid} setrunDrawerHid={setrunDrawerHid}></RunDrawer>}
    </div>
  )
}

export default React.memo(ExtractorPanel)